<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_生命周期钩子函数</title>
</head>
<body>
</body>
<script>
  function mergeHook (parentVal, childVal) {
    if (childVal) { // 子存在
      if (parentVal) { // 父存在
        return parentVal.concat(childVal) // 将父和子合并成一个数组
      } else { // 子存在，父不存在
        return [childVal] // 将钩子函数包装成一个数组
      }
    } else { // 子不存在
      return parentVal // 直接返回父
    }
  }
  function mergeOptions (parent, child) {
    let opts = {}
    for (let key in child) { // parent[key]-undefined function
      opts[key] = mergeHook(parent[key], child[key])
    } // 合并钩子方法
    return opts;
  }

  function callHook (vm, hookName) {
    vm.options[hookName]&&vm.options[hookName].forEach(h => {h()});
  }
  function Vue(options) { // 合并操作
    // 内部会将钩子函数 装成一个数组
    this.options = mergeOptions(this.constructor.options, options)
    console.log(this.options)
    callHook(this, 'beforeCreate')
    callHook(this, 'created')
  }
  // 全局组件 全局过滤器
  Vue.options = {
  } // 默认的

  Vue.mixin = function (obj) {
    // 把Vue.options中的beforeCreate 变成了数组
    // this.options[beforeCreate] = [fn]
    this.options = mergeOptions(this.options, obj);
    console.log(this.options)
  }
  Vue.mixin({ // mixin 可以提供全局数据 （数据不是共享的）
    data () {
      return {a:1}
    },
    beforeCreate() {
      console.log('混合before create ok1') 
    }
  })
  new Vue({
    beforeCreate() {
      console.log('before create ok2') 
    },
    created () {
      console.log('created')
    }
  })
</script>
</html>